<template>
  <div class="page-container">

    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-container>
        <el-aside class="el-aside-Superior">
          <p class="tree_title">组织架构管理</p>
          <el-tree :data="deptTreeList"
                   :default-expand-all="true"
                   highlight-current
                   :expand-on-click-node="false"
                   :render-content="renderContent"
                   @node-click="handleNodeClick"
                   class="left-tree"
                   :props="defaultProps"></el-tree>
        </el-aside>

        <el-container v-if="deptInfo.id">
          <el-header class="el-container-herder mar-botm-15">
            <div class="dept-context-title mb40">组织信息：
                <el-button type="primary" v-show="deptInfo.id != 1" size="small" @click="checkMerchantInfo(deptInfo.businessId)">查看详情</el-button>
            </div>
            <div class="dept-context">
              <div class="mb40">
                <span class="color333 font18  w100 t_r">组织ID：</span>
                <span class="color333 font18 w230">{{deptInfo.id}}</span>
              </div>
              <div class="mb40">
                <span class="color333 font18  w100 t_r">组织名称：</span>
                <span class="color333 font18 w230">{{deptInfo.deptName}}</span>
              </div>
            </div>
            <div class="dept-context">
              <div class="mb40">
                <span class="color333 font18  w100 t_r">组织级别：</span>
                <span class="color333 font18 w230" style="width: 275px;" v-if="deptInfo.deptType == '0'">运营平台</span>
                <span class="color333 font18 w230" style="width: 275px;" v-if="deptInfo.deptType == '1'">供应商</span>
                <span class="color333 font18 w230" style="width: 275px;" v-if="deptInfo.deptType == '2'">商户</span>
                <span class="color333 font18 w230" style="width: 275px;" v-if="deptInfo.deptType == '3'">店铺</span>
              </div>
              <div class="mb40">
                <span class="color333 font18  w100 t_r">上级组织：</span>
                <span class="color333 font18 w230">{{deptInfo.parentName}}</span>
              </div>
            </div>
          </el-header>

          <el-main class="el-container-herder el-main-content">
                <div class="f-l addAccount">
                  <kt-button type="primary" :size="size" @click="addSysUser" perms="sys:dept:add" label="添加账号"></kt-button>
                </div>

                <!-- table表格 -->
                <el-table
                  min-height="350"
                  :data="userTableData"
                  :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554','text-align': 'center'}"
                  :size="tableSize"
                  :align="align"
                  :default-sort = "{prop: 'id', order: 'descending'}"
                  highlight-current-row
                  stripe>
                  <el-table-column align="center" prop="id" label="ID" min-width="100"></el-table-column>
                  <el-table-column align="center" prop="account" label="账号" min-width="150" ></el-table-column>
                  <el-table-column align="center" prop="username" label="用户姓名" min-width="150" ></el-table-column>
                  <el-table-column align="center" prop="number" label="工号" min-width="100" ></el-table-column>
                  <el-table-column align="center" prop="mobile" label="手机号" min-width="150" ></el-table-column>
                  <el-table-column align="center" prop="roleName" label="角色" min-width="150" ></el-table-column>
                  <el-table-column align="center" label="状态" min-width="150">
                    <template slot-scope="scope">
                      <!-- <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="启用"
                        inactive-text="停用"
                        @change="switchChange(scope.row)"
                        active-value="1"
                        inactive-value="0">
                      </el-switch> -->
                      <el-button type="text" size="mini" @click="switchChange(scope.row)" :class="scope.row.status == 1 ? 'buttonDisabled':''"  :disabled="scope.row.status == 1">启用</el-button>
                      <el-button type="text" size="mini" @click="switchChange(scope.row)"  :class="scope.row.status == 0 ? 'buttonDisabled':''"  :disabled="scope.row.status == 0">停用</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" fixed="right" label="操作" width="260">
                    <template slot-scope="scope">
                      <kt-button @click="settingAuthority(scope.row)" type="text" perms="sys:dept:site" label="设置权限"></kt-button>
                      <kt-button @click="updateUccUserAuthor(scope.row)" type="text" perms="sys:dept:edit" label="编辑"></kt-button>
                      <kt-button @click="deleteUser(scope.row)" type="text" perms="sys:dept:delete" label="删除"></kt-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="t_r">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="filters.start"
                    :page-sizes="[10, 20, 50, 100 ,300 , 500]"
                    :page-size="filters.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
          </el-main>
        </el-container>
      </el-container>
    </div>

    <!-- 弹窗部分 -->
    <el-dialog :visible.sync="dialogVisibleSysUser" title="添加账号" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="dataForm.username" autocomplete="off" placeholder="请输入用户名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="dataForm.account" autocomplete="off" placeholder="请输入登录账号" :disabled="!operation" maxlength="20" oninput="value=value.replace(/[^\w\.\/]/ig,'')"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="number">
          <el-input v-model="dataForm.number" autocomplete="off" placeholder="请输入工号" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="dataForm.password" type="password" placeholder="请输入登录密码" autocomplete="off" maxlength="20" :disabled="!operation"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="dataForm.mobile" autocomplete="off" placeholder="请输入手机号" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status" :hidden="operation" style="width: 100%;">
          <el-select v-model="dataForm.status" placeholder="状态" style="width: 100%;">
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleid">
          <el-select v-model="dataForm.roleid" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="dialogVisibleSysUser=false" :size="size">取消</el-button>
        <el-button type="primary" @click="addSysAuthor" :size="size">确定</el-button>
      </div>
    </el-dialog>

    <!-- 设置权限弹窗 -->
    <el-dialog :visible.sync="tableSettingAuthor" title="设置权限" class="rightsSet">
      <el-form class="demo-form-inline2"
               :label-position="labelPosition" :size="size" v-model="authorDataForm" :rules="dataFormRules" ref="authorDataForm" >
        <el-row class="search-input">
          <el-form-item label="账号：" label-width="100px">
            <span class="value">{{authorDataForm.account}}</span>
          </el-form-item>
          <el-form-item label="姓名：" label-width="100px">
            <span class="value">{{authorDataForm.username}}</span>
          </el-form-item>
          <el-form-item label="角色：" prop="roleid" label-width="100px">
            <el-select v-model="authorDataForm.roleid">
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据权限：" prop="authority" label-width="100px" class="t_r">
            <el-tree class="author-tree-dialog" ref="tableTree" :data="authorTreeList" node-key="id" show-checkbox :props="defaultProps" @check="settingAuthorTree">
            </el-tree>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="tableSettingAuthor=false" :size="size">取消</el-button>
        <el-button type="primary" @click="updateUserAuthor" :size="size">确定</el-button>
      </div>
    </el-dialog>

    <!-- 部门弹窗 -->
    <el-dialog :visible.sync="deptDialogVisible" :title="operation?'新增':'编辑'" class="rightsSet" width="40%">
      <el-form class="demo-form-inline2" :label-position="labelPosition" :size="size" :model="deptDataForm" ref="deptDataForm" :rules="deptDataFormRules">
        <el-form-item label="组织名称：" label-width="100px" prop="deptName">
          <el-input v-model="deptDataForm.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型：" label-width="100px" prop="deptType">
          <el-select v-model="deptDataForm.deptType" style="width:100%;">
            <el-option label="运营平台" :value="0"></el-option>
            <el-option label="供应商" :value="1"></el-option>
            <el-option label="商家" :value="2"></el-option>
            <el-option label="店铺" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" label-width="100px" prop="sort">
          <el-input v-model="deptDataForm.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注：" label-width="100px" prop="remark">
          <el-input v-model="deptDataForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="deptDialogVisible=false" :size="size">取消</el-button>
        <el-button type="primary" @click="saveDeptInfo" :size="size">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from '@/views/Core/JicTable'
  import KtButton from '@/views/Core/KtButton'
  import KtSwitch from '@/views/Core/KtSwitch'

  export default {
    components: {
      CyTable,
      KtButton,
      KtSwitch,
    },

    data() {
      return {
        activeName: 'accountInformation',
        labelPosition: 'right',
        size: 'small',
        tableSize: 'mini',
        deptTreeList: [],
        defaultProps: {
          children: 'children',
          label: 'deptName'
        },
        userTableData: [],
        deptInfo: {},
        align: 'center',
        filters: {
          start: 1,
          limit: 10
        },
        total: 0,
        defaultExpandedKeys: [179],
        //添加用户
        dialogVisibleSysUser: false,
        tabsIndex: 'first',
        sysUserListloading: false,
        sysUserDataFormRules: {
          employinfo: [{required: true, message: '请输入工号/姓名', trigger: 'blur'}],
        },
        //权限机构List
        roleList: [],
        authorTreeList: [],
        //弹窗是否内嵌
        appendToBody: true,

        //表格按钮弹窗
        tableSettingAuthor: false,
        authorDataForm: {
          id: '',
          account: '',
          username: '',
          deptIdList: [],
          roleid: '',
          phone: ''
        },
        dataFormRules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          status: [{required: true, message: '请选择状态', trigger: 'blur'}],
          authority: [{required: true, message: '请选择权限', trigger: 'blur'}],
          account: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
          password: [{required: true, message: '请输入登录密码', trigger: 'blur'},
            {pattern:/[^\u4e00-\u9fa5]+$/,message:'请输入非中文字符密码'}],
          lname: [{required: true, message: '请选择所属机构', trigger: 'change'}],
          number: [{pattern:/[^\u4e00-\u9fa5]+$/, message: '请输入非中文字符工号', trigger: 'blur'}],
          roleid: [{required: true, message: '请选择角色', trigger: 'change'}],
          mobile: [{required: true, message: '请输入手机号', trigger: 'blur'},
            {pattern:/^1[3456789]\d{9}$/,message:'请输入正确的手机号'}
          ],
        },
        // 新增编辑界面数据
        dataForm: {
          id: 0,
          password: '',
          deptId: '',
          roleid:'',
          deptName: '',
          email: '',
          mobile: '',
          status: '1',
          userRoles: '1',
          account: '',
          pid: '',
          type: 0,
          number: '',
          username: ''
        },
        roles: [],
        options: [],
        operation: false, // true:新增, false:编辑
        visible: false,
        deptDialogVisible: false,//部门新增弹窗
        deptDataFormRules: {
          deptName: [{required: true, message: '请输入组织名称', trigger: 'blur'}],
          deptType: [{required: true, message: '请选择组织类型', trigger: 'change'}],
          sort: [{required: true, message: '请输入排序', trigger: 'blur'}],
        },
        deptDataForm: {
          id: 0,
          deptName: '',
          pid: '',
          sort: '',
          deptType: '',
          remark: '',

        },
        memMobile: '',                                           // 会员手机
        currentMobile: ''                                        // 存取当前手机
      }
    },

    methods: {
      renderContent(h, { node, data, store }) {
          return (
              <div>
                  <span>
                  <span>{node.label}</span>
                  </span>
              </div>
          );
      },
      appendDept(data) {
        this.deptDataForm.pid = data.id
        this.operation = true
        this.deptDialogVisible = true
      },
      editDept(data) {
        console.log(data)
        let params = Object.assign(this.deptDataForm, data)
        console.log(params)
        this.deptDialogVisible = true
      },
      deleteDept(data) {
        let params = {}
        params.ids = data.id
        var this_ = this
        this.utils.request.deleteDept(params, res => {
          if (res.code == '0000') {
            this_.$message({message: '操作成功', type: 'success'})
            this_.queryDeptTree()
          } else {
            this_.$message({
              message: '操作失败, ' + res.msg,
              type: 'error'
            })
          }
        })
      },

      /**
       * 部门新增编辑
       */
      saveDeptInfo: function () {
        this.$refs.deptDataForm.validate(valid => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              let params = Object.assign({}, this.deptDataForm)
              var this_ = this
              this.utils.request.editDeptInfo(params, function (res) {
                if (res.code == '0000') {
                  this_.$message({message: '操作成功', type: 'success'})
                  this_.deptDialogVisible = false
                  this_.$refs['deptDataForm'].resetFields()
                  this_.queryDeptTree()
                } else {
                  this_.$message({
                    message: '操作失败, ' + res.msg,
                    type: 'error'
                  })
                }
              })
            })
          }
        })
      },
      remoteMethod: function (query) {
        if (query !== '') {
          //查询后台客户信息
          var search = {}
          search.t = 'sysUser'
          search.username = query
          var this_ = this
          this.utils.request.queryUserList(search, function (res) {
            this_.options = res.data
          })
        } else {
          this.options = []
        }
      },

      /**
       * 修改数据权限
       */
      updateUserAuthor() {
        if (this.authorDataForm.deptIdList < 1) {
          this.$message({'message': '请选择用户数据权限', 'type': 'warning'})
          return false
        }
        this.$confirm('您确定要设置数据权限？', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.utils.request.updateUserAuthor(this.authorDataForm, res => {
            console.log(res)
            this.$refs.tableTree.setCheckedKeys([])
            this.$set(this.authorDataForm, 'deptIdList', [])
            this.$set(this.authorDataForm, 'account', '')
            this.$set(this.authorDataForm, 'username', '')
            this.$set(this.authorDataForm, 'roleid', '')
            this.$set(this.authorDataForm, 'phone', '')
            this.$set(this.authorDataForm, 'id', '')
            this.tableSettingAuthor = false
            this.handleNodeClick({'id': this.deptInfo.id})
          })
        }).catch(() => {});
      },

      /**
       * 选择数据权限
       */
      settingAuthorTree(val, changeList) {
        console.log('选择数据权限===》》》', val, changeList)
        this.$set(this.authorDataForm, 'deptIdList', changeList.checkedKeys)
      },

      /**
       * 新增用户
       */
      addSysAuthor() {
        let that = this;
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            //保存用户数据权限
            that.dataForm.deptId = that.deptInfo.id
            that.dataForm.deptName = that.deptInfo.deptName
            that.dataForm.type = that.deptInfo.deptType
            if (that.dataForm.id != null && that.dataForm.id != '' && that.dataForm.id != 0) {
              this.$confirm('您确定要修改该用户？', '提示', {
                confirmButtonText: '继续',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.utils.request.updateUserInfoAuthor(that.dataForm, res => {
                  if (res.code == '0000') {
                    that.$message({message: '编辑成功', type: 'success'})
                    //清空选项
                    that.handleNodeClick({'id': that.deptInfo.id})
                    //关闭弹窗
                    that.dialogVisibleSysUser = false
                  } else {
                    this.$message({message: res.msg, type: 'error'})
                  }
                })
              }).catch(() => {});
            } else {
              this.$confirm('您确定要新增该用户？', '提示', {
                confirmButtonText: '继续',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.utils.request.saveUserInfoAuthor(that.dataForm, res => {
                  if (res.code == '0000') {
                    that.$message({message: '添加成功', type: 'success'})
                    that.handleNodeClick({'id': that.deptInfo.id})
                    //关闭弹窗
                    that.dialogVisibleSysUser = false
                  } else {
                    that.$message({message: res.msg, type: 'error'})
                  }
                })
              }).catch(() => {});
            }
          }
        });
        // if (this.sysUserAuthorityDataForm.deptIdList.length < 1) {
        //   this.$message({message: '请勾选用户数据权限', type: 'warning'})
        //   return false
        // }
      },

      /**
       * 编辑用户信息
       */
      updateUccUserAuthor(params) {
        this.dialogVisibleSysUser = true
        this.$nextTick(function () {
          this.dataForm = Object.assign({}, params)
        })
        this.operation = false
        //查询组织下的角色
        this.queryRoleList(this.deptInfo.id)
      },

      /**
       * 删除用户数据
       */
      deleteUser(params) {
        let ids = params.id + ','
        this.$confirm('您确定要删除该用户？', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.utils.request.deleteSysUser({'ids': ids}, res => {
            if (res.code == '0000') {
              this.$message({message: '删除成功', type: 'success'})
              this.handleNodeClick({'id': this.deptInfo.id})
            } else {
              this.$message({message: res.msg, type: 'error'})
            }
          })
        }).catch(() => {});
      },

      /**
       * 选中权限
       */
      selectAuhtorFun(val, changeList) {
        console.log('选择数据权限===》》》', val, changeList)
        this.$set(this.sysUserAuthorityDataForm, 'deptIdList', changeList.checkedKeys)
        //checkedKeys
      },

      /**
       * 添加用户弹窗
       */
      addSysUser() {
        this.dialogVisibleSysUser = true
        this.restForm('dataForm')
        this.operation = true
        //默认选中当前选中的组织下的权限
        let deptInfo = this.deptInfo
        //查询组织下的角色
        this.queryRoleList(deptInfo.id)
      },
      //table的双色条纹
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },

      /**
       * 树点击查询用户列表
       */
      handleNodeClick(data) {
        this.deptInfo = data
        //查询当前组织下的用户
        this.filters.start = 1
        this.filters.limit = 10
        this.filters.queryDeptId = this.deptInfo.id
        this.querySysUserListByDeptId(this.filters)
        this.currentMobile = data.id
      },

      /**
       * 用户列表查询
       */
      querySysUserListByDeptId(data) {
        this.utils.request.querySysUserListByDeptId(data, res => {
          if (res.code == '0000') {
            res.data.rows.forEach(item => {
              item.status = item.status + ''
            })
            this.userTableData = res.data.rows
            this.total = res.data.total
          } else {
            this.userTableData = []
            this.total = 0
          }
        })
      },

      /**
       * 查询树状机构
       */
      queryDeptTree() {
        let that = this;
        that.utils.request.getAuthorDeptTree({}, res => {
          if (res.code == '0000') {
            that.deptTreeList = res.data;
            that.deptInfo = res.data[0];
            //查询当前组织下的用户
            that.filters.start = 1
            that.filters.limit = 10
            that.filters.queryDeptId = that.deptInfo.id
            that.querySysUserListByDeptId(this.filters)
            that.currentMobile = that.deptInfo.id
          } else {
            // this.$message({message: '查询树状组织机构失败', type: 'error'})
          }
        })
      },

      /**
       * 条数刷新
       */
      handleSizeChange(val) {
        this.filters.limit = val
        this.querySysUserListByDeptId(this.filters)
      },

      /**
       * 换页刷新
       */
      handleCurrentChange(val) {
        this.filters.start = val
        this.querySysUserListByDeptId(this.filters)
      },

      /**
       * 设置用户权限
       */
      settingAuthority(row) {
        // this.appendToBody = false;
        this.tableSettingAuthor = true
        this.$set(this.authorDataForm, 'id', row.id)
        this.$set(this.authorDataForm, 'account', row.account)
        this.$set(this.authorDataForm, 'username', row.username)
        this.$set(this.authorDataForm, 'phone', row.molie)
        this.$set(this.authorDataForm, 'roleid', row.roleid.toString())
        //查询用户有哪些数据权限
        this.queryRoleList(row.deptId)
        this.utils.request.getChildeListrByPid({deptId: row.deptId}, res => {
          this.authorTreeList = res.data
          this.utils.request.getUccUserAuthor({userId: row.id}, res => {
            this.authorDataForm.deptIdList = res.data
            this.$refs.tableTree.setCheckedKeys(res.data)
          })
        })
      },

      /**
       * 用户账号停用 启用
       */
      switchChange(val) {
        let msg = "";
        if(val.status==1){
          msg="停用"
        }else{
          msg="启用"
        }
        this.$confirm('您确定要'+msg+'该用户？', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.utils.request.updateUccUserStatus({userId: val.id, status: val.status==1?0:1}, res => {
            console.log(res)
            this.$message({message: '操作成功', type: 'success'});
            this.querySysUserListByDeptId(this.filters);
          })
        }).catch(() => {});
      },

      /**
       * 清空form表单
       */
      restForm(form) {
        if (this.$refs[form] != undefined) {
          this.$refs[form].resetFields()
        }
      },

      /**
       * 查询角色列表
       */
      queryRoleList(deptId) {
        this.utils.request.queryRoleListByDeptId({}, res => {
          this.roleList = res.data
        })
      },
      checkMerchantInfo(id){
        if(id==null || id == ''){
          this.$message({message: '该商户不存在', type: 'warning'})
          return false;
        }
        this.$router.push({path:"/MerchantBasicInfo/" + id});
      }
    },

    mounted() {
      this.queryDeptTree()
      //查询角色列表
      this.queryRoleList()
    }
  }
</script>

<style scoped lang="scss">
  .font18 {
    font-size: 18px !important;
  }

  .color333 {
    color: #333;
  }

  .w100 {
    width: 100px;
  }

  .w230 {
    display: inline-block;
    width: 295px;
  }

  .mb40 {
    margin-bottom: 40px;
  }


  .fontDeptClass {
    margin: 0 20px 0 20px;
    text-align: right;
    width: 100px;
  }

  .fontDeptClass1 {
    margin: 0 20px 0 20px;
  }

  .main-context {
    font-size: 15px;
    margin-bottom: 20px;
  }

  /deep/ .el-main {
    padding: 0;
    padding-left: 20px;
  }

  .el-aside-Superior {
    width: 320px;
    height: 784px;
    background: #FFF;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    position: relative;
  }

  .el-container-herder {
    margin-left: 26px;
    width:97.2%;
    height: auto;
    background: #FFF;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden;
  }

  .mar-botm-15 {
    height: 250px !important;
    margin-bottom: 30px;
    text-align: left;
    padding: 60px 0 45px 40px;
  }

  .el-main-content {
    text-align: left;
    padding: 40px 40px 0;
  }

  .dept-context {
    display: flex;
  }

  .dept-context-title {
    // font-weight: 800;
    font-size: 20px;
    color: #333;
  }

  .el-main-content button {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .left-tree /deep/ .el-tree-node__label {
    font-size: 16px;
  }

  .dialog-footer {
    text-align: center;
  }

  .author-tree {
    width: 260px;
    height: 260px;
    overflow-y: auto;
    border: 1px solid #d2d2d2;
    padding-top: 18px;
    box-sizing: border-box;
  }

  .el-form-item {
    display: block;
  }

  .value {
    height: 32px;
    line-height: 32px;
    color: #333;
    font-size: 16px;
  }

  .tree_title {
    font-size: 18px;
    color: #666666;
    text-align: left;
    line-height: 50px;
    line-height: 50px;
    padding-left: 10px;
    border-bottom: 1px solid #DCDFE6;
    margin-bottom: 40px;
  }

  /deep/ .el-tree {
    padding-left: 10px;
  }

  .f-l {
    float: left;
  }

  .f-r {
    float: right;
  }

  .addAccount {
    /deep/ .el-button {
      margin: 0 !important;
    }

    margin-bottom: 20px;
  }

  .rightsSet {
    /deep/ .el-dialog__body {
      padding: 0 168px !important
    }
  }

  .author-tree-dialog {
    width: 440px;
    height: 282px;
    overflow-y: auto;
    border: 1px solid #d2d2d2;
    padding-top: 18px;
    box-sizing: border-box;
    margin-top: 8px;
  }
  .buttonDisabled {
    background-color: #909399 !important;
    border-color: #909399 !important;
  }
    
</style>
